<template>
  <movable-area class="movable-area" :scale-area="false">
    <movable-view
      class="movable-view"
      :class="!isRemove ? 'animation-info' : ''"
      style="pointer-events: auto"
      @click="clickBtn"
      @touchstart="touchstart"
      @touchend="touchend"
      @change="onChange"
      direction="all"
      inertia="true"
      :x="x"
      :y="y"
      :disabled="disabled"
      :out-of-bounds="true"
      :damping="200"
      :friction="100"
    >
      <view class="h-drag-button-c">
        <view class="left-c">
          <text class="u-line-2">{{ title }}</text>
        </view>
        <image class="sign-in-gold-icon" src="@/static/my/sign-in-gold-icon.png" />
      </view>
    </movable-view>
  </movable-area>
</template>

<script>
export default {
  props: {
    //是否禁用拖动
    disabled: {
      type: Boolean,
      default: false,
    },
    //是否自动停靠
    canDocking: {
      type: Boolean,
      default: true,
    },
    //按钮默认位置离底部距离（px）
    bottomPx: {
      type: Number,
      default: 30,
    },
    //按钮默认位置离右边距离（px）
    rightPx: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: '滑动浏览15s赚积分',
    },
  },
  data() {
    return {
      left: 0,
      top: 0,
      isRemove: true,
      windowWidth: 0,
      windowHeight: 0,
      btnWidth: 0,
      btnHeight: 0,
      x: 10000,
      y: 10000,
      old: {
        x: 0,
        y: 0,
      },
    }
  },
  mounted() {
    this.getSysInfo()
  },
  methods: {
    getSysInfo() {
      let sysInfo = uni.getSystemInfoSync()
      this.windowWidth = sysInfo.windowWidth
      this.windowHeight = sysInfo.windowHeight
      let view = uni.createSelectorQuery().in(this).select('.movable-view')
      view
        .boundingClientRect((rect) => {
          this.btnWidth = rect.width
          this.btnHeight = rect.height
          this.x = this.old.x
          this.y = this.old.y
          this.$nextTick((res) => {
            this.x = this.windowWidth - this.btnWidth - this.rightPx
            this.y = this.windowHeight - this.btnHeight - this.bottomPx
          })
        })
        .exec()
    },
    //移动按钮
    onChange(e) {
      this.old.x = e.detail.x
      this.old.y = e.detail.y
    },
    //开始移动
    touchstart(e) {
      this.isRemove = true
    },
    //结束移动
    touchend(e) {
      if (this.canDocking && this.old.x) {
        this.x = this.old.x
        this.y = this.old.y
        let bWidth = (this.windowWidth - this.btnWidth) / 2
        if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) {
          this.$nextTick((res) => {
            this.x = 0
          })
        } else {
          this.$nextTick((res) => {
            this.x = this.windowWidth - this.btnWidth
          })
        }
        this.isRemove = false
      }
    },
    //点击按钮
    clickBtn() {
      this.$emit('clickBtn')
    },
  },
}
</script>

<style scoped>
.movable-view {
  min-width: 250rpx;
  min-height: 100rpx;
  color: #ffffff;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;

  .h-drag-button-c {
    position: relative;
    width: 250rpx;
    height: 100rpx;
    background: #0074fc;
    border-radius: 50rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-c {
      width: 135rpx;
      padding-left: 16rpx;
    }

    .sign-in-gold-icon {
      position: absolute;
      right: -10rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 130rpx !important;
      height: 130rpx !important;
      border-radius: 50%;
    }

    image {
      position: absolute;
      right: -10rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
    }
  }
}

.animation-info {
  transition: left 0.25s ease;
}

.movable-area {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999 !important;
  pointer-events: none;
}
</style>
